// Choose style
.style-list{
  padding: 0 45px 18px;
  border: 1px solid #E3E1E2;
  ul {
    margin: 0; padding: 0;
    padding-top: 18px;
    list-style: none;
    height: 0;
    overflow: hidden;
    &.active{
      height: auto; 
      .transition(~"height 0.3s ease-out");
    }
  }
  li{
    float: left;
    width: 140px;
  }
  label{
    display: block;
    margin-bottom: 30px;
  }
  input[type="radio"]{
    margin-right: 10px;
    vertical-align: top;
  }
  .style-btn{
    display: inline-block;
    width: 94px; height: 25px;
    line-height: 25px;
    border-radius: 13px;
    border: 0; outline: 0;
    color: #fff;
    background: #766C56;
  }
}
.subject-box {
  position: relative;
  display: block;
  min-height: 700px;
  font-size: 12px;
  *{
    .box-sizing(content-box);
  }
  ul{
    list-style: none;
    margin: 0;
    padding: 0;
  }
  li{
    padding: 0;
  }
  .cms-add-module{
    border: 3px solid #BFBFBF;
    line-height: 40px;
    text-align: center;
    font-size: 60px;
    font-weight: bold;
    cursor: pointer;
    color: #BFBFBF;
    background: #fff;
    &:hover{
      color: #fff;
      border-color: #6CE5DE;
      background: #6CE5DE;
    }
  }
  .dragging{
    &:after{
      content: " ";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 2;
      pointer-events: none;
      background: rgba(108,229,222,.5);
    }
  }
  .dragover{
    z-index: 3;
    outline: 3px solid red;
  }
  [contenteditable]{
    outline: 0;
    cursor: text !important;
  }
  // .cms-btn:before{
  //   content: " ";
  //   position: absolute;
  //   top: 0;
  //   left: 0;
  //   bottom: 0;
  //   right: 0;

  // }
  [ntes-module]{
    position: relative;
    .cms-btn{
      display: none;
      position: absolute;
      top: -35px;
      left: -3px;
      border-bottom: 3px solid #6CE5DE;
      z-index: 4;
    }
    .cms-add-module{
      line-height: 300px;
    }
  }
  [ntes-module].active{
    z-index: 1;
    outline: 3px solid #6CE5DE;
  }
  [ntes-module].p-hover{
    z-index: 1;
    box-shadow: 0 0 2000px 2000px rgba(0,0,0,.2);
    -webkit-transition: box-shadow .4s ease-in-out;
    -moz-transition: box-shadow .4s ease-in-out;
    transition: box-shadow .4s ease-in-out;
  }
  [ntes-module].hover,[ntes-module].p-hover{
    z-index: 1;
    outline: 3px solid #6ce5de;
    cursor: pointer;
    &>.center-block{
      position: relative;
    }
    &>.cms-btn,&>.center-block>.cms-btn{
      display: inline-block;
    }
  }
  [ntes-module="banner"] [ntes-module].hover{
    &:before{
      display: none !important;
    }
  }
  .ntes-global-share .item{
    display: none;
    &:nth-child(3){
      display: block;
    }
  }
}

// Module fix
.cms-module-vm{
  display: none !important;
}
.cms-hide{
  display: none !important;
}

// Module mask
// 
// 不需要实时展示效果的module:  **需要缩略图，包含vm** 
// ------------------------------------------------------
// 所有的需要缩略图的module 须加上 .cms-need-mask
// 且需要有相应的兄弟元素显示该module的缩略图
// e.g.
// <div class="cms-nav-mask"></div>   // module缩略图
// <div class="cms-need-mask"></div>  //module实际的html代码
// ------------------------------------------------------
// 
// 需要适时展示效果的module: 例如 banner
// TODO
// 
.cms-need-mask{
  display: none !important;
}
.cms-nav-mask{
  height: 43px;
  background: #333 url(../images/cms/nav.png) center center no-repeat;
}
.cms-tie-mask{
  width: 1000px;
  height: 260px;
  background: url(../images/cms/tie.png) 0 0 no-repeat;
}


.cms-feed-1-mask{
  float: left;
  height: 1133px;
  width: 640px;
  background: url(../images/cms/feed-1.jpg) 0 0 no-repeat;
}

.cms-main-4-mask{
  height: 635px;
  background: url(../images/cms/main-body-4.jpg) 0 top no-repeat;
}
.cms-main-5-mask{
  height: 340px;
  background: url(../images/cms/main-body-5.jpg) 0 top no-repeat;
}
.cms-main-6-1-mask{
  height: 324px;
  background: url(../images/cms/main-body-6-1.jpg) 0 top no-repeat;
}
.cms-main-6-2-mask{
  height: 324px;
  background: url(../images/cms/main-body-6-2.jpg) 0 top no-repeat;
}
.cms-main-7-mask{
  height: 296px;
  background: url(../images/cms/main-body-7.jpg) 0 top no-repeat;
}
.cms-main-8-mask{
  height: 1027px;
  background: url(../images/thumbnails/main-body-8.jpg) 0 top no-repeat;
}
.cms-main-9-mask{
  height: 339px;
  background: url(../images/thumbnails/main-body-9.jpg) 0 top no-repeat;
}
.cms-main-10-mask{
  height: 215px;
  background: url(../images/thumbnails/main-body-10.jpg) 0 top no-repeat;
}
.cms-main-11-mask{
  height: 203px;
  background: url(../images/thumbnails/main-body-11.jpg) 0 top no-repeat;
}
.cms-main-12-mask{
  height: 411px;
  background: url(../images/thumbnails/main-body-12.jpg) 0 top no-repeat;
}
.cms-main-13-mask{
  height: 998px;
  background: url(../images/cms/main-body-13.png) 0 top no-repeat;
}
.cms-main-14-mask{
  height: 998px;
  background: url(../images/cms/main-body-13.png) 0 top no-repeat;
}


.cms-aside-1-mask{
  height: 326px;
  background: url(../images/cms/aside-1.jpg) 0 0 no-repeat;
}
.cms-aside-2-mask{
  height: 244px;
  background: url(../images/cms/aside-2.jpg) 0 0 no-repeat;
}
.cms-aside-3-mask{
  height: 370px;
  background: url(../images/cms/aside-3.jpg) 0 0 no-repeat;
}
.cms-aside-4-mask{
  height: 297px;
  background: url(../images/cms/aside-4.jpg) 0 0 no-repeat;
}
.cms-aside-5-mask{
  height: 291px;
  background: url(../images/cms/aside-5.jpg) 0 0 no-repeat;
}
.cms-aside-6-mask{
  height: 294px;
  background: url(../images/cms/aside-6.jpg) 0 0 no-repeat;
}
.cms-aside-7-mask{
  height: 329px;
  background: url(../images/cms/aside-7.jpg) 0 0 no-repeat;
}
.cms-aside-8-mask{
  height: 220px;
  background: url(../images/cms/aside-8.jpg) 0 0 no-repeat;
}
.cms-aside-9-mask{
  height: 331px;
  background: url(../images/cms/aside-9.jpg) 0 0 no-repeat;
}
.cms-aside-10-mask{
  height: 149px;
  background: url(../images/cms/aside-10.png) 0 0 no-repeat;
}
.cms-aside-11-mask{
  height: 215px;
  background: url(../images/cms/aside-11.png) 0 0 no-repeat;
}
.cms-aside-12-mask{
  height: 213px;
  background: url(../images/cms/aside-12.png) 0 0 no-repeat;
}

.cms-vedio-1-mask{
  height: 100%;
  background: url(../images/thumbnails/vedio-1.jpg) 0 0 no-repeat;
}


.cms-photoset-1-mask{
  height: 304px;
  background: url(../images/cms/photoset-1.png) 0 0 no-repeat;
}
.cms-photoset-2-mask{
  height: 492px;
  background: url(../images/cms/photoset-2.png) 0 0 no-repeat;
}
.cms-photoset-3-mask{
  height: 470px;
  background: url(../images/cms/photoset-3.png) 0 0 no-repeat;
}
.cms-photoset-4-mask{
  height: 551px;
  background: url(../images/cms/photoset-4.png) 0 0 no-repeat;
}
.cms-photoset-5-mask{
  height: 183px;
  width: 1000px;
  margin: 0 auto;
  background: url(../images/cms/photoset-5.png) center center no-repeat;
}
.cms-photoset-6-mask{
  height: 843px;
  background: url(../images/cms/photoset-6.jpg) center center no-repeat;
}
.cms-photoset-7-mask{
  height: 227px;
  background: url(../images/cms/photoset-7.jpg) center center no-repeat;
}
.cms-photoset-8-mask{
  height: 677px;
  background: url(../images/cms/photoset-8.jpg) center center no-repeat;
}
.cms-photoset-9-mask{
  height: 396px;
  background: url(../images/cms/photoset-9.png) center center no-repeat;
}
.cms-photoset-10-mask{
  height: 390px;
  background: url(../images/cms/photoset-10.png) center center no-repeat;
}
// .cms-video-mask{
//   height: 329px;
//   background: url(../images/cms/vedio.png) 0 0 no-repeat;
// }
// .cms-schedule-mask{
//   height: 372px;
//   background: url(../images/cms/schedule.png) 0 0 no-repeat;
// }
// .cms-side-mask{
//   height: 447px;
//   background: url(../images/cms/side.png) 0 0 no-repeat;
// }
// .cms-column-1-mask{
//   height: 323px;
//   background: url(../images/cms/column-1.png) 0 0 no-repeat;
// }